<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title th:text="${#servletContext.getAttribute('applicationOptionsMap').websiteTitle} + '&nbsp;|&nbsp;File-Mgr'"></title>
	<link rel="shortcut icon" th:href="${#servletContext.getAttribute('applicationOptionsMap').websiteIco}">
	<link rel="apple-touch-icon" th:href="${#servletContext.getAttribute('applicationOptionsMap').websiteIco}">

	<!-- Tell the browser to be responsive to screen width -->
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- DataTables -->
	<link rel="stylesheet" th:href="@{/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css}">
	<link rel="stylesheet" th:href="@{/plugins/datatables-responsive/css/responsive.bootstrap4.min.css}">

	<!-- Theme style -->
	<link rel="stylesheet" th:href="@{/css/adminlte.min.css}">
	<!-- Font Awesome -->
	<link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}">
	<!-- SweetAlert2 -->
	<link rel="stylesheet" th:href="@{/plugins/sweetalert2/sweetalert2.min.css}">
	<!-- imageuploader -->
	<link rel="stylesheet" th:href="@{/plugins/imageuploader/css/styles.imageuploader.css}">
	<style>
		.gravatar-photo {
			width: 36px;
		}
	</style>

</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
	<div th:replace="leftbar::leftbar"></div>
	<!-- Content Wrapper. Contains page content -->
	<div class="content-wrapper mt-3">
		<!-- Main content -->
		<section class="content">
			<div class="container-fluid">
				<div class="row">
					<div class="col-12">
						<div class="card card-teal card-outline">
							<div class="card-header">
								<h3 class="card-title">文件列表</h3>
							</div>
							<!-- /.card-header -->
							<div class="card-body table-responsive">
								<form id="selectFile" action="/deleteSelectFile" method="post">
									<table id="testTable" class="table table-bordered table-hover text-nowrap">
										<thead>
										<tr>
											<th><input type="checkbox" id="firstCheckBox"/></th>
											<th>文件名</th>
											<th>类型</th>
											<th>类型图标</th>
											<th>文件大小</th>
											<th>上传用户</th>
											<th>上传时间</th>
											<th>状态</th>
											<th>下载次数</th>
											<th>操作</th>
										</tr>
										</thead>
									</table>
								</form>
							</div>
							<!-- /.card-body -->
						</div>
						<!-- /.card -->
					</div>
					<!-- /.col -->
				</div>

			</div>
		</section>
		<!-- /.content -->
	</div>
	<!-- /.content-wrapper -->
	<footer class="main-footer">
		<p class="text-center mb-1">
			Copyright © 2020-2021 | THE HARDER, THE MORE FORTUNATE.
		</p>
		<p class="text-center mb-1" th:if="!${#strings.isEmpty(#servletContext.getAttribute('applicationOptionsMap').icp)}">
			<a href="https://beian.miit.gov.cn/" th:text="${#servletContext.getAttribute('applicationOptionsMap').icp}"></a>
		</p>
	</footer>
	<!-- ./wrapper -->
	<div class="modal fade" id="uploadFileList">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">上传文件</h4>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<section role="main" class="l-main">
						<div class="uploader__box js-uploader__box l-center-box">
							<form action="#" method="POST" enctype="multipart/form-data">
								<div class="uploader__contents">
									<label class="button button--secondary" for="fileinput">请选择文件</label>
									<input id="fileinput" class="uploader__file-input" type="file" multiple value="Select Files">
								</div>
								<input class="button button--big-bottom" type="submit" value="Upload Selected Files">
							</form>
						</div>
					</section>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script th:src="@{/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/plugins/imageuploader/js/jquery-1.11.0.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!-- imageuploader -->
<script th:src="@{/plugins/imageuploader/js/jquery.imageuploader.js}"></script>

<!-- DataTables -->
<script th:src="@{/plugins/datatables/jquery.dataTables.min.js}"></script>
<script th:src="@{/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js}"></script>
<script th:src="@{/plugins/datatables-responsive/js/dataTables.responsive.min.js}"></script>
<script th:src="@{/plugins/datatables-responsive/js/responsive.bootstrap4.min.js}"></script>


<!-- AdminLTE App -->
<script th:src="@{/js/adminlte.min.js}"></script>
<!-- SweetAlert2 -->
<script th:src="@{/plugins/sweetalert2/sweetalert2.all.min.js}"></script>

<script type="text/javascript">
	(function(){
		var options = {};
		$('.js-uploader__box').uploader({
			'selectButtonCopy':'请选择或拖拽文件',
			'instructionsCopy':'你可以选择或拖拽多个文件',
			'submitButtonCopy':'',
			'furtherInstructionsCopy':'你可以选择或拖拽更多的文件',
			'secondarySelectButtonCopy':'选择更多的文件',
		});
	}());
</script>

<script>
	function deleteFile(fid) {
		if (confirm("你确定删除该文件吗？")) {
			location.href = "/deleteFile/" + fid;
		}
	}

	var dataTableApi = '';
	$(function () {
		if ('[[${session.USER_SESSION.role}]]' === 'administrator') {
			dataTableApi = '/adminGetFileList';
		} else {
			dataTableApi = '/userGetFileList';
		}
		$('#testTable').DataTable({
			ajax: {
				url: dataTableApi,
				data: function (param) {
					param.userId = '[[${session.USER_SESSION.uid}]]';
				}
			},
			lengthMenu: [10, 20, 50, 100],
			searching: false,
			responsive: false,
			processing: true,
			autoWidth: false,
			deferRender: true,
			stateSave: true,
			dom: '<"row"<"col-md-12"<"float-left"l><"#topPlugin.float-right">>>irt<"mt-3 pagination-sm"p>',
			initComplete: renderTopPlugin, // 初始化结束后的回调函数
			ordering: false,
			columns: [
				{
					data: "fid",
					render: function (data, type, row, meta) {
						return '<input type="checkbox" value="' + data + '" name="fid"/>';
					}
				},
				{data: "name"},
				{data: "fileType"},
				{data: "fileType",
					render: function (data, type, row, meta) {
						return '<img class="gravatar-photo" src="/img/'+data+'.png">'
					}
				},
				{data: "fileSize"},
				{data: "authorId"},
				{data: "createdTime",
					render: function (data, type, row, meta) {
						function getMyDate(time){
							var oDate = new Date(time),
								oYear = oDate.getFullYear(),
								oMonth = oDate.getMonth()+1,
								oDay = oDate.getDate(),
								oHour = oDate.getHours(),
								oMin = oDate.getMinutes(),
								oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin);//最后拼接时间
							return oTime;
						}
						function getzf(num){
							if(parseInt(num) < 10){
								num = '0'+num;
							}
							return num;
						}

						return getMyDate(data);
					}
				},
				{data: "fileStatus"},
				{data: "downloadCount"},
				{
					render: function (data, type, row, meta) {
						return '<a href="javascript:void(0);" onclick="deleteFile(' + row.fid +');" class="btn btn-danger btn-xs">删除</a>';
					}
				}
			],
			language: { // 国际化配置
				decimal: "",
				emptyTable: "表格为空",
				info: "显示从_START_到_END_条记录 (总记录数为_TOTAL_条)",
				infoEmpty: "记录数为0",
				infoFiltered: "(从_MAX_条记录过滤)",
				infoPostFix: "",
				thousands: ",",
				lengthMenu: "显示 _MENU_ 条",
				loadingRecords: "Loading...",
				processing: "正在获取数据，请稍后...",
				sSearch: "搜索",
				zeroRecords: "没有找到数据",
				paginate: {
					previous: "上一页",
					first: "第一页",
					next: "下一页",
					last: "最后一页"
				}
			},
		});

		/**
		 * 表格加载渲染完毕后执行的方法
		 * @param data
		 */
		function renderTopPlugin(data) {
			//上方topPlugin DIV中追加HTML
			//删除用户按钮的HTMLDOM
			var topPlugin = '<a href="" class="btn btn-success btn-sm" data-toggle="modal" data-target="#uploadFileList">上传</a>  <a href="javascript:void(0);" id="deleteSelectFile" class="btn btn-danger btn-sm">批量删除</a> <a href="javascript:void(0);" class="btn btn-info btn-sm">导出(未实现)</a>';
			$("#topPlugin").append(topPlugin);//在表格上方topPlugin DIV中追加HTML
			//$("#expCsv").on("click", exp1);//给下方按钮绑定事件

			document.getElementById("firstCheckBox").onclick = function () {
				var cbs = document.getElementsByName("fid");
				for (var i = 0; i < cbs.length; i++) {
					cbs[i].checked = this.checked;
				}
			};


			document.getElementById("deleteSelectFile").onclick = function () {
				var flag = false;
				var cbs = document.getElementsByName("fid");
				for (var i = 0; i < cbs.length; i++) {
					if (cbs[i].checked) {
						flag = true;
						break;
					}
				}

				if (flag) {
					if (confirm("你确定要删除选中的文件吗？")) {
						document.getElementById("selectFile").submit();
					}
				}
			};
		}
	});
</script>
</body>
</html>
